<template>
  <div class="reply" ref="ReplyRef">
    <div class="reply-who" v-if="showReply">
      <p class="kaiti">{{ replyInfo.nowTitle }}：
        <span>{{ commentMsg?.author }}</span>
        <n-tag :bordered="false" style="font-size: 12px;height:20px;margin-right: 10px;" type="info" v-if="commentMsg?.isblogger == '0'">博主</n-tag>
        <span>
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="commentMsg?.system"></use>
          </svg>
          {{ commentMsg?.system.split('-')[1] }}
        </span>
        <span>
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="commentMsg?.browser"></use>
          </svg>
          {{ commentMsg?.browser.split('-')[1] }}
        </span>
        的{{replyInfo.nowChange}}：
      </p>
      <p class="reply-info">
        <i></i>
        <span v-html="commentMsg?.text"></span>
      </p>
      <p class="reply-cancel">
        <n-button type="primary" size="tiny" @click="resetReply">取消回复</n-button>
      </p>
    </div>
    <div class="reply-input">
      <n-input
        v-model:value="text"
        type="textarea"
        placeholder="欢迎留言......"
      />
      <p class="reply-input_emoil">
        <svg class="icon" aria-hidden="true" @click="openEmo">
          <use xlink:href="#icon-manyibiaoqing"></use>
        </svg>
        <i v-show="showEmo">
          <span v-for="(item,index) in emoil" :key="index">
            <svg class="icon" aria-hidden="true" @click="checkEmo(item)">
              <use :xlink:href="item.font_class"></use>
            </svg>
          </span>
        </i>
      </p>
      <p class="reply-input_button">
        <n-button type="primary" size="small" @click="submitReply">
          <template #icon>
            <n-icon>
              <ArrowRedoSharp />
            </n-icon>
          </template>
          发 送
        </n-button>
      </p>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ArrowRedoSharp } from '@vicons/ionicons5'
import icons from "../assets/json/iconfont"
import { useNotification } from 'naive-ui'
import { getBrowserType,getUserOsInfo,getDataTime } from "../utils/index"
//显示表情选择框
const showEmo = ref(false)
//组件ref
const ReplyRef = ref(null)
//调用useState组件ref
const publishRef = usPublishRef()
//调用useState被回复人信息
const commentMsg = useComment()
//调用useState是否显示回复信息
const showReply = useShowReply()
const replyInfo = useReplyInfo()
//输入框绑定值
const text = ref('')
//打开表情选择框
const openEmo = () => {
  showEmo.value = !showEmo.value
}
//表情图标集
const emoil = reactive(icons)
//选择表情
const checkEmo = (item:any) => {
  text.value =`${text.value}<svg class="icon" aria-hidden="true"><use xlink:href="${item.font_class}"></use></svg>`
  showEmo.value = false
}
//取消回复
const resetReply = () => {
  showReply.value = false
}
const emit = defineEmits(['submitReply'])
const notification = useNotification()
//发送
const submitReply = async ()=>{
  //是否回复留言
  let isReply = true
  let ip = JSON.parse(localStorage.getItem('IP'))
  const { data } = await useFetch(`https://restapi.amap.com/v3/ip?ip=${ip}&key=2b5eaa4f60d41eb084d8085b216b9e20`)
  const userInfo = JSON.parse(localStorage.getItem('userInfo'))
  if(!userInfo){
    notification['warning']({
      content: '您还未登录，请先登录',
      meta: '登录后才能留言和评价',
      duration: 2500,
      keepAliveOnHover: true
    })
    return
  }
  if(!showReply.value){
    isReply = false
  } else {
    isReply = true
  }
  if(!text.value || text.value == ''){
    notification['error']({
      content: '提示',
      meta: '请输入内容',
      duration: 2500,
      keepAliveOnHover: true
    })
    return
  }
  let params = {
    address:`${data._value.province}-${data._value.city}`,
    author: userInfo.userName,
    avatar: "http://www.lihynotes.cn:81/songs/h.jpg",
    browser: getBrowserType(),
    createTime: getDataTime(),
    isblogger: userInfo.isBlogger,
    pId: commentMsg.value?.type?null:commentMsg.value?.id,
    rId: commentMsg.value?.type?commentMsg.value?.id:commentMsg.value?.rId,
    system: getUserOsInfo(),
    text: text.value,
    ip:ip,
    pName:commentMsg.value?.author
  }
  emit('submitReply',params,isReply)
}
//重置页面
const resetPage = () => {
  showReply.value = false
  text.value = ''
}
//导出方法
defineExpose({resetPage})
//生命周期mounted
onMounted(() => {
  publishRef.value = ReplyRef.value
})
</script>
<style scoped lang="scss">
.reply{
  margin-top: 40px;
  width: 100%;
  height: auto;
  &-who{
    padding: 20px 10px;
    border: 1px solid $yun-color;
    border-radius: 4px;
    span{
      margin-right: 10px;
    }
  }
  &-info{
    font-size: 14px;
    width: 96%;
    padding: 2% 10px;
    margin-top: 20px;
    background-image: linear-gradient(180deg, transparent 0%, #fff 100%);
    position: relative;
    i{
      display: block;
      width: 4px;
      height: 100%;
      background: $yun-color;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
  &-cancel{
    margin-top: 20px;
  }
  &-input{
    margin-top: 20px;
    &_emoil{
      position: relative;
      .icon{
        font-size: 24px;
        cursor: pointer;
      }
      font-size: 18px;
      margin-top: 10px;
      i{
        display: block;
        width: 300px;
        height: 150px;
        overflow-y: auto;
        padding: 10px;
        border-radius: 4px;
        box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05);
        position: absolute;
        top: 30px;
        background: #fff;
        span{
          display: inline-block;
          width: 40px;
          height: 40px;
          text-align: center;
          line-height: 40px;
        }
      }
    }
    &_button{
      margin-top: 10px;
      text-align: right;
      padding: 0 10px;
    }
  }
}
</style>